<template>
    <div class="min-h-screen flex items-center justify-center">
        <div class="w-full max-w-[800px] h-[500px] flex rounded-2xl shadow-2xl bg-white overflow-hidden">
            <!-- 左侧图片区域 -->
            <div class="w-1/2 bg-gradient-to-br from-blue-500 to-blue-600 p-12 flex flex-col justify-between relative overflow-hidden">
                <div class="relative z-10">
                    <h1 class="text-4xl font-bold text-[#fff] mb-6">管理系统</h1>
                    <p class="text-[#fff]">欢迎使用我们的管理系统，高效便捷的工作平台。</p>
                </div>
            </div>
            
            <!-- 右侧登录区域 -->
            <div class="w-1/2 p-12 flex flex-col justify-center bg-[#fff]">
                <div class="max-w-[400px] w-full mx-auto">
                    <h2 class="text-3xl font-bold mb-8">登录系统</h2>
                    <form @submit.prevent="handleLogin" class="space-y-6">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
                                <div class="relative">
                                    <input
                                        v-model="username"
                                        type="text"
                                        required
                                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all outline-none"
                                        placeholder="请输入用户名"
                                    >
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
                                <div class="relative">
                                    <input
                                        v-model="password"
                                        type="password"
                                        required
                                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all outline-none"
                                        placeholder="请输入密码"
                                    >
                                </div>
                            </div>
                        </div>
                        
                        <div class="pt-4">
                            <button
                                type="submit"
                                class="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 px-4 rounded-lg font-medium hover:from-blue-600 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transform transition-all duration-200 hover:scale-[1.02] text-[#fff]"
                            >
                                登录
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../store/user'
import { ElMessage } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

const username = ref('')
const password = ref('')

const handleLogin = () => {
    if (username.value === 'mega' && password.value === 'mega1407') {
        userStore.login({
            username: username.value,
            token: 'dummy-token'
        })
        ElMessage.success('登录成功')
        router.push('/')
    } else {
        ElMessage.error('用户名或密码错误')
    }
}
</script>

<style scoped>
.from-blue-100 {
    --tw-gradient-from: #dbeafe;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(219 234 254 / 0));
}

.to-blue-50 {
    --tw-gradient-to: #eff6ff;
}

.from-blue-500 {
    --tw-gradient-from: #3b82f6;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(59 130 246 / 0));
}

.to-blue-600 {
    --tw-gradient-to: #2563eb;
}
</style>